<template>
  <div>
    <h2 class="page-title ">公告添加</h2>
     <el-row>
       <el-col :xs="24" :sm="16" :md="8" :lg="6" :xl="6">
          <el-form 
            ref="annoform" 
            :model="form" 
            label-width="80px"
            status-icon 
            class="myform"
            :rules="rules"
            label-position="top"
          >
          <el-form-item label="公告标题" prop="title" >
              <el-input 
              v-model="form.title"
              placeholder="请输入公告标题"
              autocomplete="off"
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="公告内容" prop="content" >
              <el-input 
              v-model="form.content"
              placeholder="请输入公告内容"
              autocomplete="off"
              type="text"
            ></el-input>
          </el-form-item>
           <el-form-item label="公告类型" prop="type" >
              <el-select  class="rolese"    v-model="form.type" placeholder="请选择类型">
                <el-option
                  v-for="(item,index) in annoList"
                  :key="index"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="公告图片" prop="desc" >
              <el-button v-if="!form.desc" type="primary" block  icon="el-icon-upload" @click="clickupload" >上传公告图片</el-button>
              <input type="file" class="myfile" ref="myfile" @change="startUploadFile"  name="file" id="file"> 
              <div class="ubox"  v-if="form.desc">
                <i class="el-icon-delete delicon" @click="clearImg"></i>
                <img class="uimg" :src="form.desc.replace(/public/,baseURL)" alt="">
              </div>
          </el-form-item>
          <el-form-item> 
            <el-button type="success" block  @click="addAnnoAction"  :loading="loading">添加公告</el-button>
            <el-button type="danger" block @click="resetData" >重置数据</el-button>
          </el-form-item>
        </el-form>
       </el-col>
    </el-row>
  </div>
</template>

<script>
import {reactive,toRefs,ref,computed} from "vue"
import { ajax } from '../../service';
import { toast } from '../../utils';
import {useStore} from "vuex"
import {useRouter} from "vue-router"

export default {
    name:"anno-add",
    setup(){
      const annoform = ref()
      const myfile = ref()
      const store = useStore()
      const router= useRouter();
      const state = reactive({
         form:{},
         rules:{
           type:[
             { required: true, message: '请选择', trigger: 'blur'}
           ],
           title:[
             { required: true, message: '请输入', trigger: 'blur'}
           ],
            content:[
             { required: true, message: '请输入', trigger: 'blur'}
           ],
           desc:[
             { required: true, message: '请上传', trigger: 'blur'}
           ]
         }
      })
      const startUploadFile = async ()=>{
          var file = myfile.value.files[0]
          var data = new FormData()
          data.append("file",file)
          const {code,path} = await ajax.uploadfile(data)
          if(code==200){
              state.form.desc = path;
          }

      }
      const clearImg = ()=>{
        state.form.desc = ""
      }
      const clickupload = ()=>{
          myfile.value.click()
      }
      const resetData = ()=>{
         annoform.value.resetFields()
      }
      const addAnnoAction =  ()=>{
         annoform.value.validate(async valid=>{
            if(valid){
              const {code,result} = await ajax.annoaddone({
                ...state.form,
                author:store.state.userInfo.username 
              });
              if(code==200){
                router.push({name:"anno-list"})
              }


            }else{
              toast.showError("请输入有效的公告信息")
            }
         })
      }
      return {
        ...toRefs(state),
        annoform,
        myfile,
        startUploadFile,
        clickupload,
        clearImg,
        resetData,
        addAnnoAction
      }
    }
}
</script>

<style lang="scss">
.myfile{
  display:none;
}
.ubox{
  position:relative;
  .delicon{
    position:absolute;
    top:10px;
    right:10px;
    font-size:20px;
    color:#000;
    cursor:pointer;
  }
}
.uimg{
  margin-top:10px;
  width:290px;
  height:170px;
  border-radius:10px;
}
</style>